<template>
  <item-title title="招商规划" v-if="listData.length"/>

  <div class="base-info-view" v-if="listData.length">
    <div class="list-container" style="padding-bottom:20px;">
      <el-table header-cell-class-name="table-header" :data="listData" border :cell-style="cellStyle" @row-click="rowClick">
        <el-table-column prop="planInfo.planNo" label="招商规划编号" fixed="left" align="center" :min-width="100" show-overflow-tooltip/>
        <el-table-column prop="planInfo.planName" label="招商规划名称" align="left" header-align="center" fixed="left" :min-width="200" show-overflow-tooltip/>
        <el-table-column prop="address" label="准入地区" align="center" :min-width="200">
          <template #default="scope">
            <area-list-view :areas="scope.row.planInfo.region" />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="准入模式" align="center" :min-width="100">
          <template #default="scope">
            {{ getLabel('access_mode',scope.row.planInfo.accessMode) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="招商地区" align="center"/> -->
<!--        <el-table-column prop="address" label="招商模式" align="center" :min-width="100">-->
<!--          <template #default="scope">-->
<!--            {{ getLabel('plan_mode',scope.row.planInfo.planMode) }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="address" label="招商结束时间" align="center" :min-width="100">
          <template #default="scope">
            {{ dateFormat('yyyy-mm-dd',scope.row.planInfo.expireTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="创建时间" align="center" :min-width="150">
          <template #default="scope">
            {{ dateFormat('yyyy-mm-dd HH:MM',scope.row.planInfo.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="招商状态" align="center" :min-width="100">
          <template #default="scope">
            {{ getState(scope.row.planInfo.planStatus) }}
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!-- <Pagination
        :page="pager.page_number"
        :limit="pager.page_size"
        style="display: flex; justify-content: flex-end"
        :total="planDetail.length"
        @pagination="getList"
      /> -->
  </div>
  <detail-drawer
    ref="detailDrawer"
    custom-title
    :size-width="1000"
  >
    <template #title>
      <span style="font-size: 16px; margin-right: 20px">{{ datas.planInfo.planName }} </span><el-tag type="warning" size="small">{{ getLabel('plan_status',datas.planInfo.planStatus) }}</el-tag>
    </template>
    <template
      #contents
    >
      <div class="drawer-content">
        <item-title title="基本信息" />
        <el-form
                :inline="true"
                label-position="right"
                label-width="120px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="招商规划编号：">
                {{ datas.planInfo.planNo }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="招商规划名称：">
                {{ datas.planInfo.planName }}
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="datas.planInfo.planType == 1">
              <el-form-item label="招商地区：" style="width: 100%;">
                <area-list-view :areas="datas.planInfo.region" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="通用名：" style="width: 100%;">
                <span>{{ datas.planInfo.productPopularName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品名：" style="width: 100%;">
                <span>{{ datas.planInfo.productName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="包装规格：" style="width: 100%;">
                <span>{{ datas.planInfo.packSpecs }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生产厂家：" style="width: 100%;">
                <span>{{ datas.planInfo.producer }}</span>
              </el-form-item>
            </el-col>
            <!--        <el-col :span="8">-->
            <!--          <el-form-item v-if="datas.planInfo.planType == 1" label="招商模式：">-->
            <!--            {{ getLabel('plan_mode',datas.planInfo.planMode) }}-->
            <!--          </el-form-item>-->
            <!--        </el-col>-->
            <el-col :span="8" v-if="datas.planInfo.planType == 1">
              <el-form-item label="适用终端：">
                {{ getLabel('app_mode',datas.planInfo.terminalType) }}
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="datas.planInfo.planType == 1">
              <el-form-item label="准入模式：">
                {{ getLabel('access_mode',datas.planInfo.accessMode) }}
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="datas.planInfo.planType == 1">
              <el-form-item label="价格属性：">
                {{ getLabel('price_type',datas.planInfo.priceProperty) }}
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="datas.planInfo.planType == 1">
              <el-form-item label="终端价：">
                {{ datas.planInfo.terminalPrice }}元/{{ getLabel('sell_unit',datas.planInfo.sellUnit) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item v-if="datas.planInfo.planType == 4" label="交易价：">
                {{ datas.planInfo.tradePrice }}元/{{ getLabel('sell_unit',datas.planInfo.sellUnit) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="招商结束日期：">
                {{ dateFormat("yyyy-mm-dd",datas.planInfo.expireTime) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="来源：">
                {{ datas.planInfo.planSource }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="关联市场准入：">
                {{ datas.planInfo.chanceName }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="其他描述：">
                <div v-if="datas.planInfo.remark">{{ datas.planInfo.remark }}</div>
                <div v-else>暂无</div>
              </el-form-item>
            </el-col>

            <el-col :span="24" v-if="datas.planInfo.planType == 1">
              <el-form-item label="其他附件：">
                <div v-if="datas.planInfo.files && datas.planInfo.files.length">
                  <upload-file-view :file-arr="datas.planInfo.files" :is-upload="false" />
                </div>
                <div v-else>暂无</div>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>

        <template v-if="datas.planInfo.planType != 4">
          <item-title :title="datas.planInfo.planType == 1 ? '招商终端明细' : '招商地区明细'" style="margin-top:10px" />

          <terminal-detail v-if="datas.planInfo.planType == 1" is-audit :datas="datas" />

          <areaView v-else :list="datas.planDetail" :datas="datas.planInfo" />
        </template>


        <item-title title="操作记录" style="margin-top:10px" />
        <operation-view />
      </div>
    </template>
  </detail-drawer>
</template>

<script>
import {defineComponent, inject, onMounted, reactive, ref, toRefs} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import information from '@/pages/CRM/views/planManagement/finePlan/detail/modules/information.vue'
import terminalDetail from '@/pages/CRM/views/planManagement/finePlan/detail/modules/terminalDetail.vue'
import areaView from "../../../planManagement/signedPlan/detail/modules/areaView";

export default defineComponent({
  name: 'DPlan',
  components: { information, terminalDetail, areaView },
  props: {
    planDetail: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, context) {
    const api = inject('api')
    const router = useRouter()
    const route = useRoute()
    var listData = ref([])
    const getPlanDetail = () => {
      const data = {
        chanceId: Number(route.query.id),
        page: 1,
        pageSize: 100
      }
      api.chance.CHANCE_PLAN(data).then((res) => {
        console.log(res)
        if (!res.code) {
          listData.value = res.data.list
        }
      })
    }
    var detailDrawer = ref(null)
    var data = reactive({
      datas: {
        planInfo: {},
        planDetail: []
      }
    })
    const rowClick = (row, column) => {
      if (column.label === '操作') return
      detailDrawer.value.open()
      api.plan.GET_PLAN_DETAIL({ id: row.planInfo.id }).then(res => {
        if (res.code == 0) {
          console.log(res.data)
          data.datas = res.data.plan
          data.datas.planDetail.forEach(a => {
            a.name = a.areaName ? a.cityName + '/' + a.areaName : a.cityName ? a.cityName : a.provinceName
          })
          // data.planInfo=res.data.plan.planInfo
        }
      })
    }
    onMounted(() => {
      getPlanDetail()
    })
    const getState = (state) => {
      if (!state) {
        return ''
      }
      switch (state) {
        case '-1':
          return '审核未通过'
        case '1':
          return '草稿'
        case '2':
          return '审核中'
        case '3':
          return '进行中'
        case '4':
          return '已结束'
      }
    }
    var total = ref(0)
    var pager = reactive({
      page_number: 1,
      page_size: 20
    })
    return {
      ...toRefs(data),
      getPlanDetail,
      listData,
      total,
      pager,
      api,
      router,
      route,
      getState,
      detailDrawer,
      rowClick,
    }
  }
})
</script>

<style scoped>

</style>
